<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>event</title>
    <style type="text/css">

body{
    height: 2000px;
    /*width: 2000px;*/
}

#div11, #div12, #div13{
    padding:20px;
}

#div2{
    width: 200px;
    height: 100px;
    background-color: #99CCFF;
    display: none;
}

#div3{
    width: 200px;
    height: 200px;
    background-color: #99CCFF;
    position: absolute;
    right: 0;
}

.div4{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #99CCFF;
}

#div5{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ccc;
    right: 0;
}
#txta6{
    display: block;
    height: 100px;
    width: 200px;
}

    </style>
</head>
<body>


<h2>1、事件冒泡</h2>
<div id="div11" style="background-color:#ccc" onclick="console.log(this.style.backgroundColor)">
    <div id="div12"  style="background-color:green" onclick="console.log(this.style.backgroundColor)">
        <div id="div13"  style="background-color:red" onclick="console.log(this.style.backgroundColor)"></div>
    </div>
</div>


<h2>2、弹出菜单</h2>
<input type="button" value="popUp" id="btn2">
Your choice is : <label id="label2"></label>
<div id="div2">
    <a href="javascript:void(0);">AAA</a>
    <a href="javascript:void(0);">BBB</a>
    <a href="javascript:void(0);">CCC</a>
</div>


<h2>3、鼠标位置</h2>
<div id="div3">跟着鼠标移动</div>



<h2>4、一串跟着鼠标的div</h2>
<div class="div4"></div><div class="div4"></div><div class="div4"></div>
<div class="div4"></div><div class="div4"></div><div class="div4"></div>
<div class="div4"></div><div class="div4"></div><div class="div4"></div>
<div class="div4"></div><div class="div4"></div><div class="div4"></div>
<div class="div4"></div><div class="div4"></div><div class="div4"></div>


<h2>5、键盘控制div移动</h2>
<div id="div5">按左右键控制我移动</div>

<h2>6、ctrl+回车发布</h2>
<input id="txt6" type="text">
<input id="btn6" type="button" value="发布">
<textarea id="txta6"></textarea>


<script>
window.onload = function(){

    // IE7,8： 弹出！（会解析<!DOCTYPE html>）
    // 其他：弹出undefined
    console.log(document.childNodes[0].tagName);


    // 如果要用到整个页面的事件，一定要添加到document上，
    // body如果没内容，没有被撑开，触发不了事件
    // document.body.onclick = function(){
    //     console.log("bbbbb");
    // }


    document.onclick = function(e){
        // IE-all  chrome
        // console.log(event.clientX + ',' + event.clientY);

        // IE9,10 chrome FF
        // console.log(e.clientX + ',' + e.clientY)

        // 兼容的事件对象
        var oEvent = e||event;
        console.log(oEvent.clientX + ',' + oEvent.clientY);

        // 2、弹出菜单--点击空白，菜单消失
        oDiv2.style.display = "none";
    }



    // 2、弹出菜单--取消冒泡
    var oBtn2 = document.getElementById("btn2");
    var oDiv2 = document.getElementById("div2");
    var aLinks = oDiv2.getElementsByTagName("a");
    var label2 = document.getElementById("label2");
    oBtn2.onclick = function(e){
        var oEvent = e||event;
        oDiv2.style.display = "block";
        oEvent.cancelBubble = true;
    }
    oDiv2.onclick = function(e){
        var oEvent = e||event;
        this.style.display = "block";
        oEvent.cancelBubble = true;
    }
    for(var i=0; i<aLinks.length; i++){
        aLinks[i].onclick = function(e){
            var oEvent = e||event;
            oDiv2.style.display = "none";
            oEvent.cancelBubble = true;
            label2.innerHTML=this.innerHTML;
        }
    }



    // 3、鼠标位置
    // clientX,clientY是页面的‘可视区’坐标，如果页面滚动，div3就不会跟着鼠标动了
    // 所以还要算上scrollLeft，scrollTop
    // 经验：用clientX,clientY的时候，不要忘记scrollLeft，scrollTop，不然很有可能出问题
    document.onmousemove = function(e){
        /*var oEvent = e || event;
        var oDiv3 = document.getElementById("div3");
        var pos = getPos(oEvent);
        oDiv3.style.top = pos.y + 'px';
        oDiv3.style.left = pos.x + 'px';*/


        // 4、一串跟着鼠标的div
        // div第一个跟着鼠标走，后一个跟着前一个走
        /*var oEvent = e || event;
        var aDiv4 = getByClass(document, "div4");
        var pos = getPos(oEvent);
        for(var i=aDiv4.length-1; i>0; i--){
            aDiv4[i].style.left = aDiv4[i-1].offsetLeft + 'px';
            aDiv4[i].style.top = aDiv4[i-1].offsetTop + 'px';
        }
        aDiv4[0].style.top = pos.y + 'px';
        aDiv4[0].style.left = pos.x + 'px';*/
    } 



    // 5、键盘控制div移动
    document.onkeydown = function(e){
        var oEvent = e || event;
        // keyCode: 获取用户按下那个键
        console.log(oEvent.keyCode);

        var oDiv5 = document.getElementById("div5");
        // 按下键盘的左键
        if(oEvent.keyCode == 37){
            oDiv5.style.left = oDiv5.offsetLeft - 10 + 'px' ;
        }
        // 按下键盘的右键
        else if(oEvent.keyCode == 39){
            oDiv5.style.left = oDiv5.offsetLeft + 10 + 'px' ;
        }        
    }



    // 6、回车发布
    var oTxt6 = document.getElementById("txt6");
    var oTxta6 = document.getElementById("txta6");
    var oBtn6 = document.getElementById("btn6");
    // btn点击提交
    oBtn6.onclick = function(){
        oTxta6.value += oTxt6.value + '\n';
        oTxt6.value = '';
    }
    // ctrl+回车提交, 这里注意是把事件添加到oTxt6对象上
    oTxt6.onkeydown = function(e){
        var oEvent = e || event;
        if(oEvent.keyCode == 13 && oEvent.ctrlKey){
            oTxta6.value += oTxt6.value + '\n';
            oTxt6.value = '';
        }
    }







    // 封装函数，获取鼠标在页面的绝对位置
    function getPos(e){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        return {
            x: e.clientX + scrollLeft,
            y: e.clientY + scrollTop
        }
    }

    function getByClass(oParent, sClass){
        var aResult = [];
        var aEle = oParent.getElementsByTagName("*");
        for(var i=0; i<aEle.length; i++){
            if(aEle[i].className === sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }




}


</script>
</body>
</html>